<template>
  <div>
    <el-drawer
      size=500
      title="我的消息"
      :visible.sync="drawer"
      direction="ltr"
      :append-to-body="true"
      :before-close="handleClose1">
      <ul class="messageList">
        <li v-for="item in messageList" style="display: block">
          <div style="width: 90%;height: 60px;margin-top: 10px;background-color: #f7f7f7"
               @dblclick="showChatMessage(item)">
            <div style="float: left">
              <el-badge :is-dot="item.sendUserId===item.showId && item.isRead==='02'?true:false" class="item">
                <el-avatar shape="square" :src="'http://192.168.123.150'+item.headImage" :key="item.headImage"
                           :size="56"></el-avatar>
              </el-badge>
            </div>
            <div style="float: left;">
              <div style="float: top;font-size: 20px;font-family: '黑体';margin: 5px 5px">
                <span>{{ item.nickname }}</span>
              </div>
              <div style="float: bottom;font-size: 15px;font-family: '华文宋体';margin: 0px 10px 0px">
                <span v-if="item.messageType=='01'" >
                  <span v-if="item.content.length>=6" :title="item.content">{{ item.content.substring(0,6) }}...</span>
                  <span v-else >{{ item.content}}</span>
                </span>
                <span v-if="item.messageType=='02'" > [图片] </span>
                <span v-if="item.messageType=='03'" > [视频通话] </span>
              </div>
            </div>
            <div style="float: right;font-size: 12px;margin: 5px 5px">
              <span>{{ item.sendTime }}</span>
            </div>
          </div>
          <el-divider></el-divider>
        </li>
      </ul>
    </el-drawer>
    <ChatRoom :to-user="toUser" :random-string="randomString1"></ChatRoom>
  </div>
</template>

<script>
import ChatRoom from "./ChatRoom";

export default {
  name: "MyMessageList",
  components: {ChatRoom},
  props:{
    user:{
      type:Object,
      default :{
        userId:'',
        nickname: '',
        headImage: '',
      }
    },
    randomString:{
      type:String,
      default: '',
    }
  },
  data() {
    return {
      toUser: {
        name: '',
        id: '',
        headImage: '',
      },
      randomString1:'',
      drawer:false,
      messageList:[]
    }
  },
  methods:{
    showChatMessage(item) {
      this.toUser = {
        id: item.showId,
        headImage: item.headImage,
        name: item.nickname
      }
      if (item.sendUserId === item.showId && item.isRead === '02') {
        let data = {
          userId: item.sendUserId,
          toUserId: this.user.userId,
          messageType: '09'
        }
        console.log(this.global.ws)
        console.log(this.global.ws.readyState)
        if (this.global.ws && this.global.ws.readyState == 1) {
          this.global.ws.send(JSON.stringify(data))
        }
      }
      this.randomString1 = Math.random().toString(36).slice(-6);
      this.$parent.chatOrList = false
      this.getMessageList()
    },
    getMessageList() {
      this.$axios({
        url: '/getMessageList',
        method: "get",
        params: {
          userId: this.user.userId
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.messageList = res.data.data
        }
      })
    },
    showMessage() {
      this.getMessageList()
      this.drawer = true
    },
    handleClose1() {
      this.drawer = false
    },
  },
  watch:{
    'randomString'(val){
      if (val!==''){
        this.drawer = true
        this.getMessageList()
      }
    }
  }
}
</script>

<style scoped>
.el-drawer__body{
  min-width: 380px;
}
</style>
